<template>
    <div class="vip">
        <div class="vip-head">
            <div class="vip-info">
                <div class="flex-a">
                    <div><img :src="user.introduceSign" alt=""></div>
                    <div>
                        <div class="name">{{ user.nickName }}</div>
                        <div class="tip">开通会员享更多权益</div>
                    </div>
                </div>
            </div>
            <div class="vip-title">
                <div class="t flex-a"><text class="line"></text><span>会员特权</span><text class="line"></text></div>
                <div class="vip-list">
                    <div class="vip-item" v-for="item in list">
                        <div><img :src="item.url" alt=""></div>
                        <div>{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sel-list">
            <div :class="index == 1 ? 'sel-item active' : 'sel-item'" @click="select(1, 1, 29.8)">
                <!-- <span class="discount">8.3折 省5元</span> -->
                <div class="time">1个月</div>
                <div class="price">￥<text>298</text></div>
                <div class="origin">￥298</div>
            </div>
            <div :class="index == 2 ? 'sel-item active' : 'sel-item'" @click="select(2, 3, 88)">
                <span class="discount">9.9折 省22元</span>
                <div class="time">3个月</div>
                <div class="price">￥<text>888</text></div>
                <div class="origin">￥894</div>
            </div>
            <div :class="index == 3 ? 'sel-item active' : 'sel-item'" @click="select(3, 12, 128)">
                <span class="discount">6.9折 省112元</span>
                <div class="time">12个月</div>
                <div class="price">￥<text>2488</text></div>
                <div class="origin">￥3576</div>
            </div>
        </div>
        <nut-searchbar v-model="value" background="#191B1F" placeholder="输入/粘贴邀请码享优惠">
            <template #rightout> 确认 </template>
        </nut-searchbar>
        <div class="rule">
            <div class="detail">详细规则</div>
            <div class="item">· 会员服务为虚拟商品，支付成功后不支持退款</div>
            <div class="item">· 付款：确认购买后使用微信支付</div>
            <!-- <div class="item">· 取消续订：订阅期到期前24小时可取消下月续费</div> -->
        </div>
        <div class="foot flex-a flex-b">
            <nut-checkbox v-model="checkBox">安心保障<text>不自动续费</text></nut-checkbox>
            <nut-button size="small" type="default" :loading="loading" color="#F0A83F" @click="pay">立即开通</nut-button>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Right } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { uploadInfo, payUserLv } from '../../../../api/index'
export default {
    components: {
        Right
    },
    setup() {
        const data = reactive({
            index: 0,
            user: {},
            value: '',
            checkBox: true,
            price: 0,
            month: 0,
            loading: false,
            list: [
                {
                    name: '会员标示',
                    url: 'https://cxj.szzkba.cn/upload/i/2024/10/21/101932_7.png',
                },
                {
                    name: '分销收益',
                    url: 'https://s21.ax1x.com/2025/03/07/pEtFh1P.png',
                },
                // {
                //     name: '极速升级',
                //     url: 'https://cxj.szzkba.cn/upload/i/2024/10/21/101932_4.png',
                // },
                {
                    name: '专属优惠',
                    url: 'https://s21.ax1x.com/2025/03/07/pEtVNDK.png',
                },
                {
                    name: '积分加成',
                    url: 'https://s21.ax1x.com/2025/03/07/pEtVdED.png',
                },
                // {
                //     name: '消息通知',
                //     url: 'https://cxj.szzkba.cn/upload/i/2024/10/21/101932.png',
                // },
                // {
                //     name: '专属音乐',
                //     url: 'https://cxj.szzkba.cn/upload/i/2024/10/21/101932_2.png',
                // },
                // {
                //     name: '分销收益',
                //     url: 'https://cxj.szzkba.cn/upload/i/2024/10/21/101932_1.png',
                // }
                // , {
                //     name: '专属客服',
                //     url: 'https://cxj.szzkba.cn/upload/i/2024/10/21/101932_3.png',
                // }
            ]
        });
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    data.user = res.data
                }
            })
        });
        const pay = () => {
            if (data.checkBox == true) {
                if (data.index != 0) {
                    data.loading = true
                    payUserLv({ openid: data.user.passwordMd5, title: '充值', price: data.price, num: data.month }).then(response => {
                        if (response.resultCode == 200) {
                            data.loading = false
                            Taro.requestPayment({
                                timeStamp: response.data.timeStamp,
                                nonceStr: response.data.nonceStr,
                                package: response.data.package,
                                signType: response.data.signType,
                                paySign: response.data.paySign,
                                success: function (res) {
                                    //console.log(res)
                                },
                                fail: function (res) {
                                    //console.log(res)
                                }
                            })
                        }
                    })
                } else {
                    Taro.showToast({
                        title: '请选择套餐',
                        icon: 'error',
                        duration: 2000
                    })
                }
            } else {
                Taro.showToast({
                    title: '请勾选协议',
                    icon: 'error',
                    duration: 2000
                })
            }
        }
        const select = (num, monnth, price) => {
            data.index = num
            data.price = price
            data.month = monnth
        }
        return {
            ...toRefs(data), pay, select
        }
    }
};
</script>


<style lang="scss">
.vip {
    padding: 30rpx 40rpx;
    box-sizing: border-box;

    .vip-head {
        background: #212327;
        border-radius: 20rpx;

        .vip-info {
            background: url('https://cxj.szzkba.cn/upload/i/2024/11/04/111418.png')no-repeat 0 0;
            background-size: 100% 100%;
            height: 200rpx;
            padding: 10rpx 0 0 20rpx;
            box-sizing: border-box;

            img {
                width: 150rpx;
                height: 150rpx;
                margin-right: 20rpx;
            }

            .name {
                color: #fff;
                font-size: 42rpx;
            }

            .tip {
                color: #fff;
                font-size: 28rpx;
            }
        }

        .vip-title {
            .t {
                margin: 50rpx auto;
                text-align: center;
                justify-content: center;

                .line {
                    display: inline-block;
                    width: 100rpx;
                    height: 4rpx;
                    background: #3A3B3F;
                }

                span {
                    color: #C6C7CB;
                    font-size: 28rpx;
                    margin: 0 20rpx;
                }
            }

            .vip-list {

                .vip-item {
                    display: inline-block;
                    width: 25%;
                    text-align: center;
                    box-sizing: border-box;
                    margin-bottom: 40rpx;

                    div {
                        text-align: center;
                        font-size: 26rpx;
                        color: #97999D;
                    }

                    img {
                        width: 80rpx;
                        height: 80rpx;
                        margin-bottom: 10rpx;
                    }
                }
            }
        }

    }

    .sel-list {
        margin: 40rpx 0;

        .sel-item {
            display: inline-block;
            width: 32%;
            box-sizing: border-box;
            border-radius: 20rpx;
            background: #212327;
            border: 2rpx solid #2D2F33;
            position: relative;
            padding-bottom: 30rpx;

            .discount {
                color: #494346;
                font-size: 24rpx;
                background: linear-gradient(to right, #A2CAE8, #BFC2D1, #D6BABD, #E4B6B2);
                border-radius: 0 20rpx 0 20rpx;
                padding: 5rpx 10rpx;
                position: absolute;
                right: 0;
                top: 0;
            }

            .time {
                color: #EEF0F4;
                font-size: 32rpx;
                margin: 70rpx 0 50rpx 20rpx;
            }

            .price {
                color: #EEE6C4;
                margin-left: 20rpx;
                font-size: 28rpx;

                text {
                    font-size: 60rpx;
                }
            }

            .origin {
                text-decoration: line-through;
                font-size: 30rpx;
                color: #D8D5D8;
                margin: 20rpx 0 0 20rpx;
            }
        }

        .sel-item:nth-child(2) {
            margin: 0 2%;
        }

        .sel-item.active {
            border-color: #BCB5AA;
        }
    }

    .nut-searchbar {
        padding: 0 !important;
    }

    .nut-searchbar__search-input {
        border-radius: 15rpx 0 0 15rpx !important;
        height: 80rpx !important;
        background: #2B2F35;
    }

    .nut-searchbar__right-search-icon {
        background: #393E3F;
        color: #BDBFC1;
        height: 80rpx;
        width: 120rpx;
        text-align: center;
        line-height: 80rpx;
        margin: 0 !important;
        border-radius: 0 15rpx 15rpx 0;
    }

    .rule {
        .detail {
            margin: 60rpx 0 20rpx 0;
            color: #B1B2B6;
            font-size: 36rpx;
        }

        .item {
            color: #B1B2B6;
            font-size: 30rpx;
            margin-bottom: 10rpx;
        }
    }

    .foot {
        position: fixed;
        bottom: 0;
        left: 0;
        background: #2D333C;
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        width: 100%;

        .nut-checkbox__icon {
            color: #FDDFC2;
        }

        .nut-checkbox__label {
            color: #F6FCFF;
            font-size: 32rpx;

            text {
                font-size: 30rpx;
                color: #83868E;
                margin-left: 10rpx;
            }
        }
    }
}
</style>